<template>
  <div class="share wh100">
    <navBar title="邀请好友" :leftArrowFlag="true" />
    <div class="content">
      <h2>邀请亲友加入亲友团</h2>
      <p>
        邀请亲友加入后，可与您一起编写逝者生平故事，留言、上传照片、跟您一起完善逝者信息、共同缅怀
      </p>
      <div class="share_item">
        <h3>方法一：长按海报发送朋友邀请加入</h3>
        <div class="item_content">
          <vue-canvas-poster
            :widthPixels="1000"
            :painting="painting"
            @success="success"
            @fail="fail"
          ></vue-canvas-poster>
          <div class="poster_box">
              <img v-if="showPoster" class="poster_img" :src="detail.posterImg" alt="" />
          </div>
        </div>
      </div>
      <div class="share_item">
        <h3>方法二：点击发送链接邀请亲朋加入</h3>
        <div class="item_content">
          <div class="large_btn" @click="wxShare"><span>点击发送链接邀请亲朋加入</span></div>
        </div>
      </div>
    </div>
    <van-overlay class="overlay_box" :show="show" @click="show = false">
        <div class="mask_content"  @click="show = false">
                <img class="arrow" src="http://linyiapi.fushoubainian.com/files/app/download/pic/arrow.png" alt="">
                <div class="mask_main">
                    <div class="main_item">
                        <div class="item_tip"><span>1</span></div>
                        <div class="item_test">
                            <span>点击右上角</span>
                            <div class="item_btn">
                                <span>. . .</span>
                            </div>
                            <span>按钮</span>
                        </div>
                    </div>
                    <div class="main_item">
                        <div class="item_tip"><span>2</span></div>
                        <div class="item_test">
                            <span>将本页面分享给好友</span>
                            
                        </div>
                    </div>
                </div>
            </div>
    </van-overlay>
  </div>
</template>

<script>
import navBar from "@/components/navBar";
import { VueCanvasPoster } from "vue-canvas-poster";
import sdk from "@/utils/wxShare"
import {getShareData} from '@/api/memorialHall'
export default {
  data() {
    return {
      loading:null,
      painting:null,
      defaultAvatar:require('@/assets/imgs/avatar.png'),
      showPoster:false,
      show:false,//显示隐藏
      detail: {
        posterImg:null
      },
    };
  },
  components: {
    navBar,
    VueCanvasPoster,
  },
  created() {
    console.log(this.detail.posterImg, "分享");
    this.getData(this.$route.params.id)
  },
  mounted () {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      var u = navigator.userAgent, app = navigator.appVersion;
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isIOS) {
        if (window.location.href.indexOf("#reloaded") == -1) {
          window.location.href = window.location.href + "#reloaded";
          window.location.reload();
        }
      }
    }
  },
  methods: {
    async getData(id) {
      let params={
        id
      }
      let res= await getShareData(params)
      if(res.code!='2000'){
        this.$toast.fail(res.msg || "数据请求失败")
        return 
      }
      this.detail=res.data;
    
      this.ininShare(res.data)
     this.initPoster(res.data)
    },
    ininShare(data){
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          let obj={
              title: `${data.deadName}的纪念馆`,
              des:`${data. biography}`,
              linkurl: `http://taishanshengtai.com/memorialHall/${data.id}`,//分享链接
              img: `${data.deadPortraitUrl}`,	
          }
          // let url = encodeURIComponent(location.href.split('#')[0]);
          let url = location.href.split('#')[0];
          sdk.getJSSDK(url, obj)
      }else{

      }
    },
    initPoster(data){
      this.loading=this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
        });
         this.painting = {
        width: "300px",
        height: "400px",
        borderRadius: "5px",
        background: `${data.captionUrl}`,
        views: [
          {
            type: "image",
            url: data.deadPortraitUrl?`${data.deadPortraitUrl}`:this.defaultAvatar,
            css: {
              top: "20px",
              left: "120px",
              borderRadius: "30px",
              width: "60px",
              height: "60px",
            },
          },
          {
            type: "text",
            text: `${data.deadName}的纪念馆`,
            css: {
              top: "90px",
              fontSize: "14px",
              left: "105px",
              color: "#fff",
              textAlign: "center",
            },
          },
          {
            type: "text",
            text: `${data.birthday}-${data.deathday}`,
            css: {
              top: "120px",
              fontSize: "14px",
              left: "70px",
              color: "#fff",
              textAlign: "center",
            },
          },
          {
            type: "qrcode",
            content: `http://taishanshengtai.com/memorialHall/${data.id}`,
            css: {
              background: "#fff",
              width: "140px",
              height: "140px",
              left: "85px",
              top: "190px",
              borderWidth: "10px",
              borderRadius: "1px",
              borderColor: "#fff",
            },
          },
          {
            type: "text",
            text: "扫码查看在线纪念馆",
            css: {
              bottom: "30px",
              fontSize: "14px",
              left: "90px",
              color: "#fff",
              textAlign: "center",
            },
          },
        ],
      };
      
    },
    success(src) {
      console.log(src,'哈哈哈哈')
      this.$toast.clear();
      this.detail.posterImg = src;
      this.showPoster=true
    },
    fail(err) {
      console.log("fail", err);
    },
    wxShare(){
      this.show=true
    }
  },
};
</script>

<style lang="scss" scoped>
.share {
  display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
  -moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
  .content {
    flex: 1;
    padding: 0.05rem 0.37rem;
    // background-color: #3e3e3e;
    overflow-y: scroll;
    h2 {
      font-size: 14px;
      line-height: 0.2rem;
      font-weight: 600;
      margin-bottom: 0.07rem;
    }
    p {
      font-size: 14px;
      line-height: 0.2rem;
      color: $lightBlack;
      margin-bottom: 0.05rem;
    }
    .share_item {
      margin-bottom: 0.1rem;
      h3 {
        font-size: 14px;
        line-height: 0.2rem;
        font-weight: 600;
        margin-bottom: 0.07rem;
      }
      .item_content {
        display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
        -moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
        -moz-align-items: center;
-webkit-align-items: center;
align-items: center;
        .poster_box {
             width: 3rem;
          height: 4rem;
         img{
             width: 100%;
             height: 100%;
         }
        }
      }
    }
    
  }
}
.overlay_box{
  .mask_content{
            padding:1rem 0.5rem;
            font-size: 14px;
            color: #fff;
        }
        .main_item{
            display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
            -moz-align-items: center;
-webkit-align-items: center;
align-items: center;
            margin-bottom: 0.2rem;
        }
        .item_test{
            display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
            -moz-align-items: center;
-webkit-align-items: center;
align-items: center;
        }
        .item_tip{
            width: 0.2rem;
            height: 0.2rem;
            border-radius: 50%;
            background: crimson;
            text-align: center;
            line-height: 0.2rem;
            margin-right: 0.15rem;
        }
        .item_btn{
            padding:0.05rem 0.1rem;
            text-align: center;
            height: 0.3rem;
            background: #282D32;
            border-radius: 0.05rem;
            margin:0 0.1rem;
        }
        .item_btn span{
            line-height: 0.2rem;
        }
        .arrow{
            position: absolute;
            right:0.2rem;
            top:0.2rem;
            display: block;
            width: 1rem;
            z-index: 6;
        }
}
</style>